import React, { Component } from 'react';

import './index.css';

import { ANDROID_DOWNLOAD_URL, SPARE_URL } from '../../constants/Api';

class Index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isShowModl: false,
			PlaformText: "点击更多选择在浏览器中打开",
		}


	};
	componentDidMount() {
		this.detaliWechatChome();
	}




	junpToDownLoad = (plaform) => {

		if (!this.detaliWechatChome()) {
			return false;
		}
		const { history } = this.props;
		switch (plaform) {
			case "android":
				window.location.href = ANDROID_DOWNLOAD_URL;
				break;
			case "ios":
				history.push('downloadios')
				break;
			default:
				window.location.href = SPARE_URL;

		}

	}

	detaliWechatChome() {     //如果是微信浏览器内核
		let ua = navigator.userAgent;
		if (ua.indexOf('MicroMessenger') > -1 || navigator.userAgent.match(/MicroMessenger/i) === 'MicroMessenger') {
  

			if (ua.indexOf('Android') > -1 || navigator.userAgent.match(/Android/i) === 'Android') {  // Android端
				this.setState({
					isShowModl: true,
					PlaformText: `点击更多选择在浏览器中打开`
				})
			} else if (ua.indexOf('iPhone') > -1 || navigator.userAgent.match(/iPhone/i) === 'iPhone' || ua.indexOf('iPad') > 0 || navigator.userAgent.match(/iPad/i) == 'iPad') {  // iOS端
				this.setState({
					isShowModl: true,
					PlaformText: `点击更多选择在safari中打开`
				})
			}
			return false;
		}
		return true;
	}

	render() {
		return (
			<div className="mainContent">
				<div className="AndroidGuide">
					<img src={require("../../assets/images/bannar_AndroidDownload.png")} alt="" className="banner" />
					<a className="download" onClick={() => {
						this.junpToDownLoad("android")
					}}> <img src={require('../../assets/images/android.png')} alt="" className="dimage" />安卓下载安装</a>
					<a onClick={() => {
						this.junpToDownLoad("ios")
					}} className="download mt"> <img src={require('../../assets/images/ios.png')} alt="" className="dimage" />苹果下载安装</a>

					<a onClick={() => {
						this.junpToDownLoad()
					}} className="otherLink" >若无法下载，点击进入备选通道下载安装</a>
				</div>
				{
					this.state.isShowModl ?
						<div className="popup_">
							<div className="popupItem">
								<img src={require('../../assets/images/icon_arrow.png')} alt="" class="arrowIcon" />
								<p className="words">{this.state.PlaformText}</p>
								<div onClick={() => {
									this.setState({
										isShowModl: false
									})
								}} className="konwedButton">我知道了</div>
							</div>
						</div>
						: null

				}

			</div>
		);
	}
}

export default Index;
